<template>
    <div>
        <Header></Header>
        <div class="main">
            <div class="content">
                <div class="banner">
                    <img style="width: 100%" src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
                </div>
            </div>
            <div class="breadcrumb">
                <el-breadcrumb :separator-icon="'ArrowRightBold'">
                    <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
                    <el-breadcrumb-item class="link" @click="toInfoMation(activeName)">{{activeName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{courseNotice.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div>
                <p class="title">{{courseNotice.title}}</p>
                <div v-html="courseNotice.content"></div>
            </div>
        </div>
        <staticFooter></staticFooter>
    </div>
</template>

<script>
    import staticFooter from "../../../../components/staticFooter";
    import {reactive,toRefs} from 'vue'
    import {useRoute, useRouter} from 'vue-router'
    import Header from "../../../../components/Header";
    import {basicBulletin} from "../../../../api/api";
    export default {
        name: "index",
        setup(){
            let router = useRouter();
            let route = useRoute();
            let data = reactive({
                c_id:'',
                activeName:'',
                courseNotice:{}
            })

            let {c_id,activeName} = route.params;
            data.c_id = c_id;
            let activeName_map = {'pressCenter':'新闻中心','courseNotice':'课程公告'}
            data.activeName = activeName_map[activeName];

            let getBasicBulletin = () =>{
                data.activeName = '课程公告'
                basicBulletin({courseID: localStorage.getItem('activeCourse')}).then(res =>{
                    console.log('课程公告',res.data,data.c_id)
                    data.courseNotice = res.data.filter(item => item.id == data.c_id)[0]
                })
            }
            getBasicBulletin();



            let toInfoMation = (activeName) =>{
                console.log(123,activeName)
                router.push({name:'MoreInfoMation',params:{activeName:activeName}})
            }

            return{
                toInfoMation,
                ...toRefs(data)
            }
        },
        components:{
            Header,
            staticFooter
        }
    }
</script>

<style scoped>
    .link{
        cursor: pointer;
    }
    .link :hover{
        color: #409eff;
    }
    .main{
        width: 1200px;
        margin: 0 auto;
        min-height: 80vh;
    }
    .banner{
        width: 100%;
        height: 15rem;
        position: relative;
        overflow: hidden;
    }
    .title{
        color: rgba(51, 51, 51, 1);
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        padding: 30px;
        border-bottom: 1px solid  rgba(234, 234, 234, 1);
    }
    .banner > img {
        position: absolute;
        top: -100%;

    }
    .breadcrumb{
        height: 40px;
        display: flex;
        align-items: center;
    }
</style>
